<template>
  <div class="item-info rent-info">
    <div class="sub-btn">
      <div class="add-btn" v-if="this.handletype=='2'">
        <el-button @click="newrent">清空</el-button>
        <el-button @click="submitrentinfo2" v-if="edityt==true">保存</el-button>
        <el-button @click="submitrentinfo" v-else>新建</el-button>

      </div>
    </div>
    <div class="left-info">
      <div class="item">
        <span style="color:#69f;height:33px;line-height:33px"><i>*</i>房产用途</span>
        <select v-model="rentlist.usetype" style="border:1px solid #69f;height:33px" @change="newrent()">
          <option :value="item.hash.code_id" v-for="item in usetypeArr" :key="item.id">{{item.hash.code_name}}</option>
        </select>
      </div>

    </div>
    <div class="right-info">
      <div class="item2" v-if="edityt==true">
        <span style="color:#69f;line-height:40px"><i style="color:#f60">*</i>选择房屋</span>
        <el-input type="textarea" readonly autosize style="line-height:40px;width:300px;min-height:40px"
          placeholder="点击选择房屋"
          @focus="showczfw2" v-model="fw"
        >
        </el-input>
      </div>
      <div class="item2" v-else>
        <!--           @change="remove" @remove-tag="removefw"-->
        <span style="color:#69f;line-height:40px"><i style="color:#f60">*</i>选择房屋</span>
        <el-input type="textarea" :disabled="showfw" autosize style="line-height:40px;width:300px;min-height:40px"
          placeholder="点击选择房屋" @focus="showczfw" v-model="fw"
        >
        </el-input>
      </div>
    </div>

    <section v-show="rentlist.usetype=='0401'">
      <div class="left-info">
        <div class="item spec">
          <span>
            <i>*</i>使用面积
            <br>(平方米)
          </span>
          <div class="text">
            <input type="text" value="有证" readonly>
            <input type="text" v-model="usearea1" readonly>
          </div>
          <div class="text">
            <input type="text" value="无证" readonly>
            <input type="text" v-model="usearea2" readonly>
          </div>
        </div>
        <div class="item">
          <span>
            <i>*</i>占地面积(平方米)
          </span>
          <input type="text" v-model="rentlist.zdmj" disabled>
          <!-- <b class="errorMes">{{ errors.first('占地面积') }}</b> v-validate="'required'" name="占地面积"
            oninput="value=value.match(/^\d*(\.?\d{0,2})/g)"
            placeholder="请输入数字" -->
        </div>
        <!-- <div class="item">
          <span>
            <i>*</i>使用性质
          </span>
          <input type="text" v-model="rentlist.usenature" v-validate="'required'" name="使用性质"
            placeholder="请输入"
          >
          <b class="errorMes">{{ errors.first('使用性质') }}</b>
        </div> -->
        <div class="item">
          <span>
            <i>*</i>使用性质
          </span>
          <select v-model="rentlist.usenature">
            <option value="undefined" selected style="display:none;">请选择</option>
            <option
              :value="item.hash.code_id"
              v-for="item in shiyongArr"
              :key="item.id"
            >{{item.hash.code_name}}</option>
          </select>
        </div>

        <div class="item" style="height:40px;line-height:40px">
          <span>
            <i>*</i>承租人
          </span>

          <!-- <select v-model="rentlist.renter" @change="getrenterinfo(rentlist.renter)">
            <option value="">请选择</option>
            <option
              :value="item.hash.tid"
              v-for="item in renterList"
              :key="item.id"
            >{{item.hash.tname}}</option>
          </select> -->
          <!-- <el-tooltip effect="dark" content="承租人信息需要管理进行新增或修改" placement="right">
            <el-select v-model="rentlist.renter" style="width:300px;" @change="getrenterinfo(rentlist.renter)"
              :disabled="handletype=='3'||handletype=='4'" :placeholder="(handletype=='4'||handletype=='3')?'':'点击选择承租人'"
            >
              <el-option

                v-for="item in renterList"
                :key="item.hash.tid"
                :label="item.hash.tname"
                :value="item.hash.tid"
              >
              </el-option>
            </el-select>
          </el-tooltip> -->
          <el-tooltip effect="dark" content="承租人信息需要管理进行新增或修改" placement="right">
            <!-- <el-select v-model="rentlist.renter" style="width:300px;" @change="getrenterinfo(rentlist.renter)"
              :disabled="handletype=='3'||handletype=='4'" :placeholder="(handletype=='4'||handletype=='3')?'':'点击选择承租人'"
            >
              <el-option

                v-for="item in renterList"
                :key="item.hash.tid"
                :label="item.hash.tname"
                :value="item.hash.tid"
              >
              </el-option>
            </el-select> -->
            <el-autocomplete @input="clearinput" @blur="ischeck" style="width:300px;" v-model="renter"
              :fetchSuggestions="querySearchAsync"
              placeholder="请输入" @select="getrenterinfo"
            ></el-autocomplete>
          </el-tooltip>
        </div>
        <div class="item">
          <span>承租人类型</span>
          <input type="text" v-model="rentlist.rentertype" disabled>
        </div>
        <div class="item">
          <span>注册地址</span>
          <input type="text" v-model="rentlist.regaddr" disabled>
        </div>
        <div class="item">
          <span>单位信用等级</span>
          <input type="text" v-model="rentlist.creditlev" disabled>
        </div>
        <div class="item">
          <span>单位性质</span>
          <input type="text" v-model="rentlist.naturer" disabled>
        </div>
        <div class="item">
          <span>
            联系人
          </span>
          <input type="text" v-model="rentlist.contactor" disabled>
        </div>
        <div class="item">
          <span>
            联系方式
          </span>
          <input type="text" v-model="rentlist.contact" disabled>
        </div>
        <div class="item spec clearfix">
          <span>
            职工
            <br>(数量)
          </span>
          <div class="text">
            <input type="text" value="外来" disabled>
            <input type="text" v-model="rentlist.employee2" disabled>
          </div>
          <div class="text">
            <input type="text" value="本地" disabled>
            <input type="text" v-model="rentlist.employee1" disabled>
          </div>
        </div>
        <div class="item textarea">
          <span>备注</span>
          <textarea type="text" v-model="rentlist.remark"></textarea>
        </div>

        <!-- <div class="item">
          <span>
            <i>*</i>实收租金(元)
          </span>
          <input
            type="text"
            v-model="rentlist.acturerentfee"
            v-validate="'required|decimal'"
            name="实收租金"
          >
          <b class="errorMes">{{ errors.first('实收租金') }}</b>
        </div> -->

      </div>
      <div class="right-info">
        <p v-for="(item, index) in fwlist" :key="index">
          {{item.yznumber}},,, {{item.wznumber}},,, {{item.id}}
        </p>

        <!-- <div class="item">
          <span>
            <i>*</i>收租期限
          </span>
          <el-date-picker
            v-model="rentdate"
            type="daterange"
            rangeSeparator="至"
            startPlaceholder="开始日期"
            endPlaceholder="结束日期"
            valueFormat="yyyy-MM-dd"
          ></el-date-picker>
        </div>

        <div class="item spec2">
          <span>
            <i>*</i>出租形式
          </span>
          <select v-model="rentlist.renttype" @change="rentType(rentlist.renttype)">
            <option value="undefined">请选择</option>
            <option
              :value="item.hash.code_id"
              v-for="item in renttypeArr"
              :key="item.id"
            >{{item.hash.code_name}}</option>
          </select>
        </div>
        <div class="item">
          <span>
            <i>*</i>联系人
          </span>
          <input type="text" v-model="rentlist.contactor" v-validate="'required'" name="联系人">
          <b class="errorMes">{{ errors.first('联系人') }}</b>
        </div>
        <div class="item">
          <span>
            <i>*</i>联系方式
          </span>
          <input type="text" v-model="rentlist.contact" v-validate="'required'" name="联系方式">
          <b class="errorMes">{{ errors.first('联系方式') }}</b>
        </div>

        <!-- <div class="item">
          <span>
            <i>*</i>押金(元)
          </span>
          <input
            type="text"
            v-model="rentlist.guarant"
            onkeyup="value=value.replace(/[^\d]/g,'')"
            placeholder="请输入数字"
          >
        </div> -->

        <div class="item">
          <span>
            <i>*</i>合同期限
          </span>
          <el-date-picker v-model="rentdate" type="daterange" rangeSeparator="至" startPlaceholder="开始日期"
            endPlaceholder="结束日期"
            valueFormat="yyyy-MM-dd" style="height:30px"
          ></el-date-picker>
        </div>
        <div class="item">
          <span>
            <i>*</i>租金(元)
          </span>
          <input type="text" v-model="rentlist.rentfee" v-validate="'required|decimal'" name="租金"
            oninput="value=value.match(/^\d*(\.?\d{0,2})/g)"
            placeholder="请输入数字"
          >
          <b class="errorMes">{{ errors.first('租金') }}</b>
        </div>
        <div class="item">
          <span>
            <i>*</i>押金(元)
          </span>
          <input type="text" v-model="rentlist.deposit" v-validate="'required|decimal'" name="押金"
            oninput="value=value.match(/^\d*(\.?\d{0,2})/g)"
            placeholder="请输入数字"
          >
          <b class="errorMes">{{ errors.first('押金') }}</b>
        </div>

        <div class="item">
          <span>
            平均日租金/㎡(元)
          </span>
          <input type="text" v-model="rentdayfee" disabled>
        </div>
        <div class="item">
          <span></span>
          <input type="text" v-model="renttime" disabled style="width:40%">
          <input type="text" style="width:10%" value="天" disabled>
        </div>


        <div class="item textarea">
          <span>证照应用范围</span>
          <textarea type="text" v-model="rentlist.rentuse" disabled></textarea>
        </div>
        <div class="item textarea">
          <span>实际经营情况</span>
          <textarea type="text" v-model="rentlist.actureuse" disabled></textarea>
        </div>

      </div>
      <section style="margin:20px 0 100px 0">
        <p style="font-weight:bold;margin-bottom:20px">上传附件</p>
        <div class="upload-btn" style="margin-left:120px;width:90px;color:#333;text-align:left;">
          <test v-if="isreload" tn="rentagreement" localfiletype="02" :imagefile="this.rentlist"
            :isupload="handletype"
          >合同上传</test>
        </div>
        <div class="upload-btn" style="margin-left:100px;width:90px;color:#333;text-align:left;width:100px">
          <test v-if="isreload" tn="rentuseattach" localfiletype="02" :imagefile="this.rentlist"
            :isupload="handletype"
          >租户照片上传</test>
        </div>
        <div class="upload-btn" style="margin-left:100px;width:90px;color:#333;text-align:left;width:130px">
          <test v-if="isreload" tn="actureuseattach" localfiletype="02" :imagefile="this.rentlist"
            :isupload="handletype"
          >租户营业执照上传</test>
        </div>
      </section>
    </section>
    <section v-show="rentlist.usetype=='0404'">
      <div class="left-info">
        <div class="item spec clearfix">
          <span>
            使用面积
            <br>(平方米)
          </span>
          <div class="text">
            <input type="text" value="有证" readonly>
            <input type="text" v-model="usearea1" readonly>
          </div>
          <div class="text">
            <input type="text" value="无证" readonly>
            <input type="text" v-model="usearea2" readonly>
          </div>
        </div>
        <div class="item">
          <span>
            <i>*</i>占地面积(平方米)
          </span>
          <input type="text" v-model="rentlist.zdmj" disabled>
          <!-- <b class="errorMes">{{ errors.first('占地面积') }}</b> -->
        </div>
        <!-- <div class="item">
          <span>
            <i>*</i>使用性质
          </span>
          <input type="text" v-model="rentlist.usenature" v-validate="'required'" name="使用性质"
            placeholder="请输入"
          >
          <b class="errorMes">{{ errors.first('使用性质') }}</b>
        </div> -->
        <div class="item">
          <span>
            <i>*</i>使用性质
          </span>
          <select v-model="rentlist.usenature">
            <option value="undefined" selected style="display:none;">请选择</option>
            <option
              :value="item.hash.code_id"
              v-for="item in shiyongArr"
              :key="item.id"
            >{{item.hash.code_name}}</option>
          </select>
        </div>

        <!-- <div class="item">
          <span>
            租金(元)
          </span>
          <input type="text" v-model="rentlist.rentfee" style="width: 300px" disabled>
        </div> -->

      </div>
      <div class="right-info">
        <div class="item">
          <span>
            <i>*</i>联系人
          </span>
          <input type="text" v-model="rentlist.contactor" v-validate="'required'" name="联系人">
          <b class="errorMes">{{ errors.first('联系人') }}</b>
        </div>
        <div class="item textarea">
          <span>备注</span>
          <textarea type="text" v-model="rentlist.remark"></textarea>
        </div>
      </div>
    </section>
    <section v-show="rentlist.usetype=='0403'">
      <div class="left-info">
        <div class="item spec clearfix">
          <span>
            使用面积
            <br>(平方米)
          </span>
          <div class="text">
            <input type="text" value="有证" readonly>
            <input type="text" v-model="usearea1" readonly>
          </div>
          <div class="text">
            <input type="text" value="无证" readonly>
            <input type="text" v-model="usearea2" readonly>
          </div>
        </div>
        <div class="item">
          <span>
            <i>*</i>占地面积(平方米)
          </span>
          <input type="text" v-model="rentlist.zdmj" disabled>
          <!-- <b class="errorMes">{{ errors.first('占地面积') }}</b> -->
        </div>
        <!-- <div class="item">
          <span>
            <i>*</i>使用性质
          </span>
          <input type="text" v-model="rentlist.usenature" v-validate="'required'" name="使用性质"
            placeholder="请输入"
          >
          <b class="errorMes">{{ errors.first('使用性质') }}</b>
        </div> -->
        <div class="item">
          <span>
            <i>*</i>使用性质
          </span>
          <select v-model="rentlist.usenature">
            <option value="undefined" selected style="display:none;">请选择</option>
            <option
              :value="item.hash.code_id"
              v-for="item in shiyongArr"
              :key="item.id"
            >{{item.hash.code_name}}</option>
          </select>
        </div>

        <div class="item">
          <span>
            <i>*</i>使用期限
          </span>
          <el-date-picker v-model="rentdate" type="daterange" rangeSeparator="至" startPlaceholder="开始日期"
            endPlaceholder="结束日期"
            valueFormat="yyyy-MM-dd" style="height:30px"
          ></el-date-picker>
        </div>
        <div class="item" style="height:40px;line-height:40px">
          <span>
            <i>*</i>承租人
          </span>
          <!-- <select v-model="rentlist.renter" @change="getrenterinfo(rentlist.renter)">
            <option value="">请选择</option>
            <option
              :value="item.hash.tid"
              v-for="item in renterList"
              :key="item.id"
            >{{item.hash.tname}}</option>
          </select> -->
          <!-- <el-select v-model="rentlist.renter" style="width:300px;" @change="getrenterinfo(rentlist.renter)"
            :disabled="handletype=='3'||handletype=='4'" :placeholder="(handletype=='4'||handletype=='3')?'':'请输入'"
          >
            <el-option

              v-for="item in renterList"
              :key="item.hash.tid"
              :label="item.hash.tname"
              :value="item.hash.tid"
            >
            </el-option>
          </el-select> -->
          <el-tooltip effect="dark" content="承租人信息需要管理进行新增或修改" placement="right">
            <!-- <el-select v-model="rentlist.renter" style="width:300px;" @change="getrenterinfo(rentlist.renter)"
              :disabled="handletype=='3'||handletype=='4'" :placeholder="(handletype=='4'||handletype=='3')?'':'点击选择承租人'"
            >
              <el-option

                v-for="item in renterList"
                :key="item.hash.tid"
                :label="item.hash.tname"
                :value="item.hash.tid"
              >
              </el-option>
            </el-select> -->
            <el-autocomplete @blur="ischeck" @input="clearinput" style="width:300px;" v-model="renter"
              :fetchSuggestions="querySearchAsync"
              placeholder="请输入" @select="getrenterinfo"
            ></el-autocomplete>
          </el-tooltip>
        </div>
        <div class="item">
          <span>承租人类型</span>
          <input type="text" v-model="rentlist.rentertype" disabled>
        </div>
        <div class="item">
          <span>注册地址</span>
          <input type="text" v-model="rentlist.regaddr" disabled>
        </div>
        <div class="item">
          <span>单位信用等级</span>
          <input type="text" v-model="rentlist.creditlev" disabled>
        </div>
        <div class="item">
          <span>单位性质</span>
          <input type="text" v-model="rentlist.naturer" disabled>
        </div>
        <div class="item">
          <span>
            联系人
          </span>
          <input type="text" v-model="rentlist.contactor" disabled>
        </div>
        <div class="item">
          <span>
            联系方式
          </span>
          <input type="text" v-model="rentlist.contact" disabled>
        </div>
        <div class="item spec clearfix">
          <span>
            职工
            <br>(数量)
          </span>
          <div class="text">
            <input type="text" value="外来" disabled>
            <input type="text" v-model="rentlist.employee2" disabled :placeholder="(handletype=='4'||handletype=='3')?'':'请输入'">
          </div>
          <div class="text">
            <input type="text" value="本地" disabled>
            <input type="text" v-model="rentlist.employee1" disabled :placeholder="(handletype=='4'||handletype=='3')?'':'请输入'">
          </div>
        </div>


      </div>
      <div class="right-info">

        <div class="item textarea">
          <span>备注</span>
          <textarea type="text" v-model="rentlist.remark"></textarea>
        </div>
        <div class="item">
          <span>
            <i>*</i>押金(元)
          </span>
          <input type="text" v-model="rentlist.deposit" v-validate="'required|decimal'" name="押金"
            oninput="value=value.match(/^\d*(\.?\d{0,2})/g)"
            placeholder="请输入数字"
          >
          <b class="errorMes">{{ errors.first('押金') }}</b>
        </div>
        <!-- <div class="item">
          <span>
            租金(元)
          </span>
          <input type="text" v-model="rentlist.rentfee" style="width: 300px" disabled>
        </div> -->
        <div class="item textarea">
          <span>证照应用范围</span>
          <textarea type="text" v-model="rentlist.rentuse" disabled></textarea>
        </div>
        <div class="item textarea">
          <span>实际经营情况</span>
          <textarea type="text" v-model="rentlist.actureuse" disabled></textarea>
        </div>
      </div>
    </section>
    <section v-show="rentlist.usetype=='0402'">
      <div class="left-info">
        <div class="item spec clearfix">
          <span>
            使用面积
            <br>(平方米)
          </span>
          <div class="text">
            <input type="text" value="有证" readonly>
            <input type="text" v-model="usearea1" readonly>
          </div>
          <div class="text">
            <input type="text" value="无证" readonly>
            <input type="text" v-model="usearea2" readonly>
          </div>
        </div>
        <div class="item">
          <span>
            <i>*</i>占地面积(平方米)
          </span>
          <input type="text" v-model="rentlist.zdmj" disabled>
          <!-- <b class="errorMes">{{ errors.first('占地面积') }}</b> -->
        </div>
        <!-- <div class="item">
          <span>
            <i>*</i>使用性质
          </span>
          <input type="text" v-model="rentlist.usenature" v-validate="'required'" name="使用性质"
            placeholder="请输入"
          >
          <b class="errorMes">{{ errors.first('使用性质') }}</b>
        </div> -->
        <div class="item">
          <span>
            <i>*</i>使用性质
          </span>
          <select v-model="rentlist.usenature">
            <option value="undefined" selected style="display:none;">请选择</option>
            <option
              :value="item.hash.code_id"
              v-for="item in shiyongArr"
              :key="item.id"
            >{{item.hash.code_name}}</option>
          </select>
        </div>

        <!-- <div class="item">
          <span>
            租金(元)
          </span>
          <input type="text" v-model="rentlist.rentfee" style="width: 300px" disabled>
        </div> -->
        <div class="item">
          <span>
            <i>*</i>联系人
          </span>
          <input type="text" v-model="rentlist.contactor" v-validate="'required'" name="联系人">
          <b class="errorMes">{{ errors.first('联系人') }}</b>
        </div>
      </div>
      <div class="right-info">

        <div class="item textarea">
          <span>备注</span>
          <textarea type="text" v-model="rentlist.remark"></textarea>
        </div>
      </div>
    </section>

    <div class="info-list">
      <div class="title">用途信息明细表</div>
      <table width="100%" class="table">
        <thead>
          <tr>
            <th>序号</th>
            <th>用途编号</th>
            <th>日期</th>
            <th>联系人</th>
            <th>房产用途</th>
            <th width="23%" style='word-wrap: break-word'>房屋编号</th>
            <th>总面积(平方米)</th>
            <th>有证使用面积(平方米)</th>
            <th>无证使用面积(平方米)</th>
            <th>占地面积(平方米)</th>
            <th>创建人</th>
            <th>审核人</th>
            <th>归档人</th>
            <th>状态</th>
            <th style="width:150px">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="detailData3.length==0">
            <td colspan="13">暂无数据</td>
          </tr>
          <tr v-for="(item,index) in detailData3" :key="item.id" v-else :class="{xiugai:item.hash.status=='0'}"
            :style="{background:(item.hash.status=='10'?'rgb(235, 235, 228)':'')}"
          >
            <td>{{index+1}}</td>
            <td>{{item.hash.rentnum}}</td>
            <td>{{item.hash.intime}}</td>
            <td>{{item.hash.linkman}}</td>
            <td>{{item.hash.usetypename}}</td>
            <td style="word-wrap: break-word">{{item.hash.detailnum}}</td>
            <td>{{Number(item.hash.area1) + Number(item.hash.area2)}}</td>
            <td>{{item.hash.area1}}</td>
            <td>{{item.hash.area2}}</td>
            <td>{{item.hash.zdmj}}</td>
            <td>{{item.hash.op}}</td>
            <td>{{item.hash.checker}}</td>
            <td>{{item.hash.deluser}}</td>
            <td>{{item.hash.statusname}}</td>
            <td>
              <span style="color:blue;margin-right:6px" @click="ischeckRentinfo(item.hash.rentid,item)">查看</span>
              <span style="color:blue;margin-right:6px" @click="ischeckRentinfo2(item.hash.rentid,item)" v-if="item.hash.status=='0'&&handletype=='2'">编辑</span>
              <span style="color:blue" v-if="item.hash.status=='0'&&handletype=='2'" @click="removeRent(item.hash.rentid,item.hash.status)">删除</span>
              <span v-if="handletype=='2'&&item.hash.status=='1'&&isshowgd" @click="unactiveRent(item.hash.rentid)" style="color:blue">归档</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="info-list">
      <div class="title">用途信息汇总表</div>
      <table width="100%" class="table">
        <thead>
          <tr>
            <th>房产用途</th>
            <th>面积(平方米)</th>
            <th>有证面积(平方米)</th>
            <th>无证面积(平方米)</th>
            <th>价格(元)</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in detailData4" :key="item.id" :class="{xiugai2:item.hash.usetype=='未分配'}">
            <td>{{item.hash.usetype}}</td>
            <td>{{item.hash.usearea}}</td>
            <td>{{item.hash.usearea1}}</td>
            <td>{{item.hash.usearea2}}</td>
            <td>{{item.hash.rentfee}}</td>
          </tr>
          <tr v-if="this.detailData4.length==0">
            <td colspan="6">暂无数据</td>
          </tr>
        </tbody>
      </table>
    </div>

    <el-dialog title="待选房屋" :visible.sync="xzfw" width="70%" :closeOnClickModal="false"
      :closeOnPressEscape="false"
      :showClose="false" style="z-index:3000"
    >
      <el-table ref="multipleTable" :data="fwSelect" tooltipEffect="dark" style="width: 100%"
        @selection-change="getxzfw"
        v-loading="loadingfw"
      >
        <el-table-column type="selection" width="55" :selectable="checkfw">
        </el-table-column>
        <el-table-column prop="hash.detailnum" label="房屋编号" width="120">
        </el-table-column>
        <el-table-column prop="hash.area1" label="有证使用面积" width="120">

        </el-table-column>
        <el-table-column prop="hash.area2" label="无证使用面积">
        </el-table-column>
        <el-table-column prop="hash.area2" label="剩余有证使用面积">
          <template slot-scope="scope">
            <el-input v-model="scope.row.hash.rentarea1" placeholder="请输入需要使用的面积" :disabled="scope.row.hash.isuse=='0'"
              ref="input1" @input="oninput($event,scope.row)" oninput="value=value.match(/^\d*(\.?\d{0,2})/g)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="hash.area2" label="剩余无证使用面积">
          <template slot-scope="scope">
            <el-input v-model="scope.row.hash.rentarea2" placeholder="请输入需要使用的面积" @input="oninput2($event,scope.row)"
              :disabled="scope.row.hash.isuse=='0'" oninput="value=value.match(/^\d*(\.?\d{0,2})/g)"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetfw">重 置</el-button>
        <el-button type="primary" @click="xzfw=false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import test from '~/components/common/upload/test.vue';

export default {
  data() {
    return {
      isshowgd: false,
      checkid: '',
      edityt: false,
      showfw: false,
      fwlist: [],
      shiyongArr: [],
      wznumber: '',
      yznumber: '',
      xzfw: false,
      renter: '',
      renterList: [],
      restaurants: [],
      ts: this.newStore(),
      rentlist: {
        usetype: '0401',
        rentfee: '',
        detailid: [],
        renter: '',
        rentarea1: [],
        rentarea2: [],
      },
      rentdate: [],
      rentdate1: [],
      fwSelect: [],
      rentnum: '',
      isshow: false,
      loadingfw: true,
      rentagreement: '',
      rentuseattach: '',
      actureuseattach: '',
      imgUrl: '',
      fwrentid: '',
      choosedFw: [],
      rentertypeArr: [],
      renttypeArr: [],
      feetypeArr: [],
      rentstatuArr: [],
      usetypeArr: [],
      detailData3: [],
      detailData4: [],
      detailData1: {},
      detailData: {},
      isupload: '',
      isreload: true,
      timeout: null,
      checkrenter: {},
    };
  },
  props: {
    handletype: {
      type: String,
      twoWay: true,
    },
    // 点击节点回调
    func: {
      type: Function,
      default: null,
    },

  },

  computed: {
    fw() {
      let str = '';
      for (let i = 0; i < this.choosedFw.length; i += 1) {
        str +=
						`${this.choosedFw[i].hash.detailnum}(${this.choosedFw[i].hash.rentarea1} , ${this.choosedFw[i].hash.rentarea2});`;
      }
      return str;
    },
    renttime() {
      if (this.rentdate == null) {
        this.rentdate = [];
      }
      const date1 = new Date(this.rentdate[0]);
      const date2 = new Date(this.rentdate[1]);
      const date = (date2.getTime() - date1.getTime()) / (1000 * 60 * 60 * 24);
      if (date) {
        return date + 1;
      }
      return 0;
    },
    rentdayfee() {
      const a = this.rentlist.rentfee;
      const b = this.renttime;
      const c = Number(this.usearea1) + Number(this.usearea2);
      if (a && b && c) {
        return (Number(a) / Number(b) / Number(c)).toFixed(10);
      }
      return 0;
    },
    usearea1() {
      let sum1 = 0;
      for (let i = 0; i < this.choosedFw.length; i += 1) {
        sum1 += Number(this.choosedFw[i].hash.rentarea1);
      }
      return sum1;
    },
    usearea2() {
      let sum1 = 0;

      for (let i = 0; i < this.choosedFw.length; i += 1) {
        sum1 += Number(this.choosedFw[i].hash.rentarea2);
      }
      return sum1;
    },
  },
  watch: {
    usearea1() {
      if (this.handletype == '2') {
        this.getytzdmj();
      }
    },
    usearea2() {
      if (this.handletype == '2') {
        this.getytzdmj();
      }
    },
  },
  components: {
    test,
  },
  methods: {
    getytzdmj() {
      console.log(this.usearea1, this.usearea2);

      const req = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD5F33E3BC6F34CF07B42AC329F27C12B1',
        token: localStorage.getItem('token'),
        hid: this.$route.query.hid,
        area: Number(this.usearea1) + Number(this.usearea2),
        rentid: this.fwrentid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.rentlist.zdmj = ts.d.data.operation1[0].hash.zdmj;
      });
    },
    checkgd2() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0BF829FBCD1B3C6C87ABE555654F5B8C21',
        token: localStorage.getItem('token'),
        funcid: '204108',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.data.operation1[0].hash.cou == '0') {
          this.isshowgd = false;
        } else {
          this.isshowgd = true;
        }
      });
    },
    clearinput() {
      console.log('111');

      this.checkrenter = {};
      this.rentlist.rentertype = '';
      this.rentlist.regaddr = '';
      this.rentlist.contactor = '';
      this.rentlist.contact = '';
      this.rentlist.employee1 = '';
      this.rentlist.employee2 = '';
      this.rentlist.rentuse = '';
      this.rentlist.actureuse = '';
      this.rentlist.creditlev = '';
      this.rentlist.naturer = '';
    },
    ischeck() {
      if (this.checkrenter.id == undefined) {
        this.renter = '';
        this.rentlist.renter = '';
      }
    },
    querySearchAsync(queryString, cb) {
      console.log(queryString);
      const results = queryString ? this.restaurants.filter(this.createStateFilter(queryString)) : this.restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter(queryString) {
      return restaurant => (restaurant.value.indexOf(queryString) > -1);
    },
    oninput(data, item) {
      if (data > Number(item.hash.maxarea1)) {
        item.hash.rentarea1 = item.hash.maxarea1;
      } else if (data < 0) {
        item.hash.rentarea1 = 0;
      }
    },
    oninput2(data, item) {
      if (data > Number(item.hash.maxarea2)) {
        item.hash.rentarea2 = item.hash.maxarea2;
      } else if (data < 0) {
        item.hash.rentarea2 = 0;
      }
    },
    checkfw(row) {
      if (row.hash.isuse == '0') {
        return 0;
      }
      return 1;
    },
    showczfw() {
      const req = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD89D98CC08EF55FA1AD28C3179164CDFD',
        token: localStorage.getItem('token'),
        hid: this.$route.query.hid,
        onlynormal: '1',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.fwSelect = ts.d.data.operation1;
        const a = [];

        for (let i = 0; i < this.fwSelect.length; i += 1) {
          this.fwSelect[i].hash.maxarea1 = this.fwSelect[i].hash.rentarea1;
          this.fwSelect[i].hash.maxarea2 = this.fwSelect[i].hash.rentarea2;
          if (this.fwSelect[i].hash.rentarea1 == '0' && this.fwSelect[i].hash.rentarea2 == '0') {
            this.fwSelect[i].hash.isuse = '0';
          } else {
            this.fwSelect[i].hash.isuse = '1';
          }
          for (let j = 0; j < this.choosedFw.length; j += 1) {
            if (this.fwSelect[i].hash.detailnum == this.choosedFw[j].hash.detailnum) {
              a.push(this.fwSelect[i]);
            }
          }
        }
        this.$nextTick(() => {
          for (let i = 0; i < a.length; i += 1) {
            this.$refs.multipleTable.toggleRowSelection(a[i]);
          }
        });
      });
      this.xzfw = true;
      this.loadingfw = false;
    },
    showczfw2() {
      const req = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD89D98CC08EF55FA1AD28C3179164CDFD',
        token: localStorage.getItem('token'),
        hid: this.$route.query.hid,
        rentid: this.checkid,
        onlynormal: '1',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.fwSelect = ts.d.data.operation1;
        const a = [];

        for (let i = 0; i < this.fwSelect.length; i += 1) {
          this.fwSelect[i].hash.maxarea1 = this.fwSelect[i].hash.rentarea1;
          this.fwSelect[i].hash.maxarea2 = this.fwSelect[i].hash.rentarea2;
          if (this.fwSelect[i].hash.rentarea1 == '0' && this.fwSelect[i].hash.rentarea2 == '0') {
            this.fwSelect[i].hash.isuse = '0';
          } else {
            this.fwSelect[i].hash.isuse = '1';
          }
          for (let j = 0; j < this.choosedFw.length; j += 1) {
            if (this.fwSelect[i].hash.detailnum == this.choosedFw[j].hash.detailnum) {
              a.push(this.fwSelect[i]);
            }
          }
        }
        this.$nextTick(() => {
          for (let i = 0; i < a.length; i += 1) {
            this.$refs.multipleTable.toggleRowSelection(a[i]);
          }
        });
      });
      this.xzfw = true;
      this.loadingfw = false;
    },
    getxzfw(val) {
      this.choosedFw = val;
      //       const req = {
      //   handle: '76ABA4BE996F68CEF9A9763329C1A0DD1C1E493C3971E71F',
      //   token: localStorage.getItem('token'),
      //   supid: '',
      //   codetype,
      // };
      // this.spost(this.ts, '/mainservlet', req).then((ts) => {
      //   // console.log(ts.d.data.operation1);
      //   this[td] = ts.d.data.operation1;
      // });
    },
    getrenterinfo(id) {
      this.checkrenter = id;
      if (id.value == '') {
        this.rentlist.rentertype = '';
        this.rentlist.regaddr = '';
        this.rentlist.contactor = '';
        this.rentlist.contact = '';
        this.renterData.employee1 = '';
        this.renterData.employee2 = '';
        this.renterData.rentuse = '';
        this.renterData.actureuse = '';
        this.renterData.creditlev = '';
        this.renterData.naturer = '';
        this.rentlist.renter = '';
      }
      for (let i = 0; i < this.renterList.length; i += 1) {
        if (this.renterList[i].hash.tid == id.id) {
          this.rentlist.rentertype = this.renterList[i].hash.ttypename;
          this.rentlist.regaddr = this.renterList[i].hash.address;
          this.rentlist.contactor = this.renterList[i].hash.linkman;
          this.rentlist.contact = this.renterList[i].hash.linkphone;
          this.rentlist.employee1 = this.renterList[i].hash.employee1;
          this.rentlist.employee2 = this.renterList[i].hash.employee2;
          this.rentlist.rentuse = this.renterList[i].hash.rentuse;
          this.rentlist.actureuse = this.renterList[i].hash.actureuse;
          this.rentlist.creditlev = this.renterList[i].hash.creditlev;
          this.rentlist.naturer = this.renterList[i].hash.naturername;
          this.rentlist.renter = id.id;
        }
      }
    },
    rentType(type) {
      if (type == '02') {
        this.rentlist.usearea1 = this.detailData.acturearea1;
        this.rentlist.usearea2 = this.detailData.acturearea1;
        if (this.detailData.acturearea1 >= this.detailData.areabuild1) {
          this.rentlist.usearea1 = this.detailData.areabuild1;
          this.rentlist.usearea2 = this.detailData.acturearea1 - this.detailData.areabuild1;
        } else {
          this.rentlist.usearea1 = this.detailData.acturearea1;
          this.rentlist.usearea2 = 0;
        }
      } else {
        this.rentlist.usearea1 = '';
        this.rentlist.usearea2 = '';
      }
    },
    newrent() {
      // this.rentlist = { usetype: '0401', rentfee: '0' };
      this.showfw = false;
      this.edityt = false;
      this.renter = '';
      this.fwrentid = '';
      this.rentdate = [];
      this.rentdate1 = [];
      this.choosedFw = [];
      this.rentlist.employee1 = '';
      this.rentlist.deposit = '';
      this.rentlist.employee2 = '';
      this.rentlist.creditlev = '';
      this.rentlist.naturer = '';
      this.rentlist.usenature = '';
      this.rentlist.rentertype = '';
      this.rentlist.detailid = [];
      this.rentlist.rentarea1 = [];
      this.rentlist.rentarea2 = [];
      this.rentlist.contact = '';
      this.rentlist.renttime = '';
      this.rentlist.rentfee = '';
      this.rentlist.acturerentfee = '';
      this.rentlist.guarant = '';
      this.rentlist.rentuse = '';
      this.rentlist.regaddr = '';
      this.rentlist.contactor = '';
      this.rentlist.renttype = 'undefined';
      this.rentlist.rentdayfee = '';
      this.rentlist.rentyear = '';
      this.rentlist.actureuse = '';
      this.rentlist.usearea1 = '';
      this.rentlist.usearea2 = '';
      this.rentlist.remark = '';
      this.rentlist.zdmj = '';
      this.rentlist.actureuseattach = '';
      this.rentlist.rentagreement = '';
      this.rentlist.rentuseattach = '';
      this.rentlist.ischeckrent = true;
      this.isreload = false;
      this.$nextTick(() => {
        this.isreload = true;
      });
    },
    getrenterList() {
      const res = {
        handle: 'D721B46D2973C039F541EED792A24A2478A9D2FDFE2446E0CD3A43E9777C4E90',
        token: localStorage.getItem('token'),
        start: 1,
        param: '',
        ttype: '',
        limit: '100000',
      };
      this.spost(this.ts, '/mainservlet', res).then((ts) => {
        this.renterList = ts.d.data.operation1;
        // this.restaurants = ts.d.data.operation1;
        for (let index = 0; index < this.renterList.length; index += 1) {
          const a = {};
          a.value = this.renterList[index].hash.tname;
          a.id = this.renterList[index].hash.tid;
          this.restaurants.push(a);
        }
        console.log(this.restaurants);
      });
    },
    getSelectList(codetype, td) {
      const req = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD1C1E493C3971E71F',
        token: localStorage.getItem('token'),
        supid: '',
        codetype,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        // console.log(ts.d.data.operation1);
        this[td] = ts.d.data.operation1;
      });
    },
    showPic(name) {
      this.isshow = true;
      this.imgUrl = name;
    },
    hidepic() {
      this.isshow = false;
    },
    resetfw() {
      this.$nextTick(() => {
        this.$refs.multipleTable.clearSelection();
      });
    },
    getHuizong() {
      let res;
      if (this.handletype == '4') {
        res = {
          handle: '76ABA4BE996F68CED1DAFEAEFDB7308179AB86C29EBF69997EA0B3BD4D1F723D',
          token: localStorage.getItem('token'),
          hid: this.$route.query.hid,
        };
      } else {
        res = {
          handle: '76ABA4BE996F68CED1DAFEAEFDB730818BD2251BFD283E2B',
          token: localStorage.getItem('token'),
          hid: this.$route.query.hid,
        };
      }
      this.spost(this.ts, '/mainservlet', res).then((ts) => {
        this.detailData4 = ts.d.data.operation1;
      });
    },
    getRentlist() {
      const res = {
        handle: '76ABA4BE996F68CE15C917E318C173B24A05C288BEC83E87',
        token: localStorage.getItem('token'),
        rentid: this.$route.query.rentid,
      };
      this.spost(this.ts, '/mainservlet', res).then((ts) => {
        this.rentlist = ts.d.data.operation1[0].hash;
        // console.log(this.rentlist);
      });
    },
    removeRent(id, status) {
      const res = {
        handle: '76ABA4BE996F68CEB3F2193D08E31332E8503650BB319D62',
        token: localStorage.getItem('token'),
        rentid: id,
      };
      if (status == '1') {
        this.$message('此条信息已审核，不能删除！');
      } else {
        this.$confirm('确认删除此条记录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.spost(this.ts, '/mainservlet', res).then((ts) => {
            this.$message({
              type: 'success',
              message: '删除成功!',
            });
            this.newrent();
            this.getbaseinfo();
            this.getHuizong();
            this.getfwSelect();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
      }
    },
    unactiveRent(id) {
      const res = {
        handle: '76ABA4BE996F68CE369E74C0A84D16DA3E96C520233B988F8C54F3C9EAAF0E54',
        token: localStorage.getItem('token'),
        rentid: id,
      };
      this.$confirm('归档后该数据不参与统计，确认归档？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.spost(this.ts, '/mainservlet', res).then((ts) => {
          this.$message({
            type: 'success',
            message: '归档成功!',
          });
          this.getbaseinfo();
          this.getHuizong();
          this.getfwSelect();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        });
      });
    },
    getTestinput(imgPath, tn) {
      this[tn] = imgPath;
    },
    getbaseinfo() {
      // else if(this.dotype == '4') {

      // }
      // alert(this.handletype);
      let req;
      if (this.handletype == '3') {
        req = {
          handle: '76ABA4BE996F68CED6E79E6CF72B4AD04920EC37433E0E2F91BE9BB85CED52D6',
          hid: this.$route.query.hid,
          token: localStorage.getItem('token'),
          xh: this.$route.query.xh,
        };
      } else if (this.handletype == '4') {
        req = {
          handle: '76ABA4BE996F68CE15C917E318C173B269F098E9778AE023CB7683D9B20500C7',
          hid: this.$route.query.hid,
          token: localStorage.getItem('token'),
          xh: this.$route.query.xh,
        };
      } else {
        req = {
          handle: '76ABA4BE996F68CE15C917E318C173B275852EAA595983BF',
          hid: this.$route.query.hid,
          token: localStorage.getItem('token'),
          xh: this.$route.query.xh,
        };
      }
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (this.handletype == '3') {
          this.detailData3 = ts.d.data.operation3;
        } else {
          this.detailData3 = ts.d.data.operation2;
        }

        for (let i = 0; i < this.detailData3.length; i += 1) {
          switch (this.detailData3[i].hash.usetype) {
            case '0401':
              this.detailData3[i].hash.usetypename = '租赁';
              break;
            case '0404':
              this.detailData3[i].hash.usetypename = '闲置';
              break;
            case '0403':
              this.detailData3[i].hash.usetypename = '无偿使用';
              break;
            case '0402':
              this.detailData3[i].hash.usetypename = '自用';
              break;
            default:
              break;
          }
          switch (this.detailData3[i].hash.status) {
            case '0':
              this.detailData3[i].hash.statusname = '待审核';
              break;
            case '1':
              this.detailData3[i].hash.statusname = '已审核';
              break;
            case '10':
              this.detailData3[i].hash.statusname = '已归档';
              break;
            default:
              break;
          }
        }
      });
    },
    // getbaseinfo() {
    //   const req = {
    //     handle: '76ABA4BE996F68CE15C917E318C173B275852EAA595983BF',
    //     hid: this.$route.query.hid,
    //     token: localStorage.getItem('token'),
    //   };
    //   this.spost(this.ts, '/mainservlet', req).then((ts) => {

    //     if (this.dotype == '3') {
    //       this.detailData = ts.d.data.operation2[0].hash;
    //       this.detailData1 = ts.d.data.operation1[0].hash;
    //     } else {
    //       this.detailData = ts.d.data.operation1[0].hash;
    //     }
    //   });
    // },
    getfwSelect() {
      const req = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD89D98CC08EF55FA1AD28C3179164CDFD',
        token: localStorage.getItem('token'),
        hid: this.$route.query.hid,
        onlynormal: '1',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.fwSelect = ts.d.data.operation1;
        for (let i = 0; i < this.fwSelect.length; i += 1) {
          this.fwSelect[i].hash.maxarea1 = this.fwSelect[i].hash.rentarea1;
          this.fwSelect[i].hash.maxarea2 = this.fwSelect[i].hash.rentarea2;
          if (this.fwSelect[i].hash.rentarea1 == '0' && this.fwSelect[i].hash.rentarea2 == '0') {
            this.fwSelect[i].hash.isuse = '0';
          } else {
            this.fwSelect[i].hash.isuse = '1';
          }
        }
        this.loadingfw = false;
      });
    },
    ischeckRentinfo(id, item) {
      this.edityt = false;
      this.showfw = true;
      this.renter = '';
      this.fwrentid = '';
      this.fwrentid = id;
      const req = {
        handle: '76ABA4BE996F68CE15C917E318C173B24A05C288BEC83E87',
        token: localStorage.getItem('token'),
        rentid: id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        // console.log(ts.d.data.operation1);contractstart contractend
        this.choosedFw = ts.d.data.operation2;
        this.rentlist = ts.d.data.operation1[0].hash;
        this.rentlist.zdmj = item.hash.zdmj;
        console.log(this.rentlist);

        this.rentlist.detailid = [];
        for (let i = 0; i < ts.d.data.operation2.length; i += 1) {
          this.rentlist.detailid.push(ts.d.data.operation2[i].hash.detailid);
        }
        for (let i = 0; i < this.renterList.length; i += 1) {
          if (this.rentlist.renter == this.renterList[i].hash.tid) {
            this.renter = this.renterList[i].hash.tname;
          }
        }
        // this.usearea1 = this.rentlist.usearea1;
        // this.usearea2 = this.rentlist.usearea2;
        this.rentdate = [this.rentlist.rentstart, this.rentlist.rentend];
        this.rentdate1 = [this.rentlist.contractstart, this.rentlist.contractend];
      });
    },
    ischeckRentinfo2(id, item) {
      this.edityt = true;
      this.rentnum = '';
      this.fwrentid = '';
      this.fwrentid = id;
      this.rentlist = {
        usetype: '0401',
        rentfee: '0',
        detailid: [],
        renter: '',
        rentarea1: [],
        rentarea2: [],
      };
      this.checkid = id;
      const req = {
        handle: '76ABA4BE996F68CE15C917E318C173B24A05C288BEC83E87',
        token: localStorage.getItem('token'),
        rentid: id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        // console.log(ts.d.data.operation1);contractstart contractend
        this.choosedFw = ts.d.data.operation2;
        this.rentlist = ts.d.data.operation1[0].hash;
        this.rentlist.zdmj = item.hash.zdmj;
        this.rentlist.detailid = [];
        for (let i = 0; i < ts.d.data.operation2.length; i += 1) {
          this.rentlist.detailid.push(ts.d.data.operation2[i].hash.detailid);
        }
        for (let i = 0; i < this.renterList.length; i += 1) {
          if (this.rentlist.renter == this.renterList[i].hash.tname) {
            this.rentlist.renterid = this.renterList[i].hash.tid;
          }
        }
        for (let i = 0; i < this.renterList.length; i += 1) {
          if (this.rentlist.renter == this.renterList[i].hash.tid) {
            this.renter = this.renterList[i].hash.tname;
          }
        }
        // this.usearea1 = this.rentlist.usearea1;
        // this.usearea2 = this.rentlist.usearea2;
        this.rentnum = this.rentlist.rentnum;
        this.rentdate = [this.rentlist.rentstart, this.rentlist.rentend];
        this.rentdate1 = [this.rentlist.contractstart, this.rentlist.contractend];
      });
    },
    submitrentinfo() {
      this.rentlist.detailid = [];
      this.rentlist.rentarea1 = [];
      this.rentlist.rentarea2 = [];
      for (let i = 0; i < this.choosedFw.length; i += 1) {
        this.rentlist.detailid.push(this.choosedFw[i].hash.detailid);
        this.rentlist.rentarea1.push(this.choosedFw[i].hash.rentarea1);
        this.rentlist.rentarea2.push(this.choosedFw[i].hash.rentarea2);
      }
      console.log(this.rentlist.detailid);


      if (this.rentlist.usetype == '0401') {
        if (this.rentlist.detailid == 'undefined' || this.rentlist.detailid == '') {
          this.$message('房屋不能为空');
          return;
        }

        if (!this.rentlist.usenature || this.rentlist.usenature.length < 1) {
					  this.$message('使用性质不能为空');
					  return;
        }
        if (!this.rentlist.zdmj || this.rentlist.zdmj.length < 1) {
					  this.$message('占地面积不能为空');
					  return;
        }
        if (!this.rentlist.renter || this.rentlist.renter.length < 1) {
          this.$message('承租人不能为空');
          return;
        }
        console.log('1111', this.rentdate);
        if (this.rentdate.length == 0) {
          this.$message('合同期限不能为空');
          return;
        }
        if (!this.rentlist.rentfee || this.rentlist.rentfee.length < 1) {
          this.$message('租金不能为空');
          return;
        }
        if (!this.rentlist.deposit || this.rentlist.deposit.length < 1) {
          this.$message('押金不能为空');
          return;
        }
        if (!this.rentlist.contactor || this.rentlist.contactor.length < 1) {
          this.$message('联系人不能为空');
          return;
        }


        const req = {
          handle: '76ABA4BE996F68CEF9A9763329C1A0DD0D98AD5F3FB0025073DC9BB465DFE61D',
          token: localStorage.getItem('token'),
        };
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          this.rentlist.rentnum = ts.d.data.operation1[0].hash.ytbh;
        });
        this.$confirm('确认新增？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const res = {
            handle: '76ABA4BE996F68CE5F203644521BEE2A7A27570527E9E604',
            token: localStorage.getItem('token'),
            hid: this.$route.query.hid,
            detailid: this.rentlist.detailid,
            rentarea1: this.rentlist.rentarea1,
            rentarea2: this.rentlist.rentarea2,
            rentnum: this.rentlist.rentnum,
            detailidlist: this.rentlist.detailid.toString(),
            usenature: this.rentlist.usenature,
            usetype: this.rentlist.usetype,
            remark: this.rentlist.remark,
            usearea1: this.usearea1,
            usearea2: this.usearea2,
            deposit: this.rentlist.deposit,
            rentertype: this.rentlist.rentertype,
            renter: this.rentlist.renter,
            contact: this.rentlist.contact,
            renttime: this.rentlist.renttime,
            employee1: this.rentlist.employee1,
            employee2: this.rentlist.employee2,
            creditlev: this.rentlist.creditlev,
            naturer: this.rentlist.naturer,
            rentstart: this.rentdate[0],
            rentend: this.rentdate[1],
            contractstart: this.rentdate1[0],
            contractend: this.rentdate1[1],
            acturerentfee: this.rentlist.acturerentfee,
            rentfee: this.rentlist.rentfee,
            guarant: this.rentlist.guarant,
            zdmj: this.rentlist.zdmj,
            rentuse: this.rentlist.rentuse,
            regaddr: this.rentlist.regaddr,
            contactor: this.rentlist.contactor,
            renttype: this.rentlist.renttype,
            renttypedes: this.rentlist.renttypedes,
            rentdayfee: this.rentlist.rentdayfee,
            rentyear: this.rentlist.rentyear,
            actureuse: this.rentlist.actureuse,
            actureuseattach: this.rentlist.actureuseattach,
            rentagreement: this.rentlist.rentagreement,
            rentuseattach: this.rentlist.rentuseattach,
          };
          this.spost(this.ts, '/mainservlet', res).then((ts) => {
            this.$message({
              type: 'success',
              message: '新增成功!',
            });
            this.newrent();
            this.getbaseinfo();
            this.getHuizong();
            this.getfwSelect();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
      } else if (this.rentlist.usetype == '0403') {
        if (this.rentlist.detailid == 'undefined' || this.rentlist.detailid == '') {
          this.$message('房屋不能为空');
          return;
        }
        if (!this.rentlist.usenature || this.rentlist.usenature.length < 1) {
					  this.$message('使用性质不能为空');
					  return;
        }
        if (!this.rentlist.zdmj || this.rentlist.zdmj.length < 1) {
					  this.$message('占地面积不能为空');
					  return;
        }
        if (!this.rentlist.deposit || this.rentlist.deposit.length < 1) {
          this.$message('押金不能为空');
          return;
        }
        if (this.rentdate.length == 0) {
          this.$message('使用期限不能为空');
          return;
        }
        if (!this.rentlist.renter || this.rentlist.renter.length < 1) {
          this.$message('承租人不能为空');
          return;
        }
        if (!this.rentlist.contactor || this.rentlist.contactor.length < 1) {
          this.$message('联系人不能为空');
          return;
        }
        const req = {
          handle: '76ABA4BE996F68CEF9A9763329C1A0DD0D98AD5F3FB0025073DC9BB465DFE61D',
          token: localStorage.getItem('token'),
        };
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          this.rentlist.rentnum = ts.d.data.operation1[0].hash.ytbh;
        });
        this.$confirm('确认新增？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const res = {
            handle: '76ABA4BE996F68CE5F203644521BEE2A7A27570527E9E604',
            token: localStorage.getItem('token'),
            hid: this.$route.query.hid,
            detailid: this.rentlist.detailid,
            rentarea1: this.rentlist.rentarea1,
            rentarea2: this.rentlist.rentarea2,
            deposit: this.rentlist.deposit,
            detailidlist: this.rentlist.detailid.toString(),
            usenature: this.rentlist.usenature,
            usetype: this.rentlist.usetype,
            usearea1: this.usearea1,
            remark: this.rentlist.remark,
            usearea2: this.usearea2,
            rentertype: this.rentlist.rentertype,
            renter: this.rentlist.renter,
            contact: this.rentlist.contact,
            renttime: this.rentlist.renttime,
            zdmj: this.rentlist.zdmj,
            rentstart: this.rentdate[0],
            rentend: this.rentdate[1],
            rentnum: this.rentlist.rentnum,
            contractstart: this.rentdate1[0],
            contractend: this.rentdate1[1],
            rentfee: this.rentlist.rentfee,
            acturerentfee: this.rentlist.acturerentfee,
            creditlev: this.rentlist.creditlev,
            naturer: this.rentlist.naturer,
            guarant: this.rentlist.guarant,
            rentuse: this.rentlist.rentuse,
            regaddr: this.rentlist.regaddr,
            contactor: this.rentlist.contactor,
            renttype: this.rentlist.renttype,
            renttypedes: this.rentlist.renttypedes,
            rentdayfee: this.rentlist.rentdayfee,
            rentyear: this.rentlist.rentyear,
            actureuse: this.rentlist.actureuse,
            actureuseattach: this.rentlist.actureuseattach,
            rentagreement: this.rentlist.rentagreement,
            rentuseattach: this.rentlist.rentuseattach,
          };
          this.spost(this.ts, '/mainservlet', res).then((ts) => {
            this.$message({
              type: 'success',
              message: '新增成功!',
            });
            this.newrent();
            this.getbaseinfo();
            this.getHuizong();
            this.getfwSelect();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
      } else {
        if (this.rentlist.detailid == 'undefined' || this.rentlist.detailid == '') {
          this.$message('房屋不能为空');
          return;
        }
        if (!this.rentlist.usenature || this.rentlist.usenature.length < 1) {
					  this.$message('使用性质不能为空');
					  return;
        }
        if (!this.rentlist.zdmj || this.rentlist.zdmj.length < 1) {
					  this.$message('占地面积不能为空');
					  return;
        }
        if (!this.rentlist.contactor || this.rentlist.contactor.length < 1) {
          this.$message('联系人不能为空');
          return;
        }
        const req = {
          handle: '76ABA4BE996F68CEF9A9763329C1A0DD0D98AD5F3FB0025073DC9BB465DFE61D',
          token: localStorage.getItem('token'),
        };
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          this.rentlist.rentnum = ts.d.data.operation1[0].hash.ytbh;
        });
        const res6 = {
          handle: '76ABA4BE996F68CE417AAAFED0C1AC078F14FB57504808088C54F3C9EAAF0E54',
          token: localStorage.getItem('token'),
          detailidlist: this.rentlist.detailid.toString(),
          usetype: this.rentlist.usetype,
          usenature: this.rentlist.usenature,
        };
        this.spost(this.ts, '/mainservlet', res6).then((ts) => {
          if (ts.d.data.operation1[0].hash.check1 == '1') {
            this.$confirm('确认新增？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => {
              const res = {
                handle: '76ABA4BE996F68CE5F203644521BEE2A7A27570527E9E604',
                token: localStorage.getItem('token'),
                hid: this.$route.query.hid,
                rentnum: this.rentlist.rentnum,
                detailid: this.rentlist.detailid,
                rentarea1: this.rentlist.rentarea1,
                rentarea2: this.rentlist.rentarea2,
                detailidlist: this.rentlist.detailid.toString(),
                usetype: this.rentlist.usetype,
                creditlev: this.rentlist.creditlev,
                naturer: this.rentlist.naturer,
                usenature: this.rentlist.usenature,
                usearea1: this.usearea1,
                usearea2: this.usearea2,
                remark: this.rentlist.remark,
                rentertype: this.rentlist.rentertype,
                renter: this.rentlist.renter,
                contact: this.rentlist.contact,
                renttime: this.rentlist.renttime,
                zdmj: this.rentlist.zdmj,
                rentstart: this.rentdate[0],
                rentend: this.rentdate[1],
                contractstart: this.rentdate1[0],
                contractend: this.rentdate1[1],
                rentfee: this.rentlist.rentfee,
                acturerentfee: this.rentlist.acturerentfee,
                guarant: this.rentlist.guarant,
                rentuse: this.rentlist.rentuse,
                regaddr: this.rentlist.regaddr,
                contactor: this.rentlist.contactor,
                renttype: this.rentlist.renttype,
                renttypedes: this.rentlist.renttypedes,
                rentdayfee: this.rentlist.rentdayfee,
                rentyear: this.rentlist.rentyear,
                actureuse: this.rentlist.actureuse,
                actureuseattach: this.rentlist.actureuseattach,
                rentagreement: this.rentlist.rentagreement,
                rentuseattach: this.rentlist.rentuseattach,
              };
              this.spost(this.ts, '/mainservlet', res).then((ts) => {
                if (ts.d.length > 100) {
                  this.$message({
                    type: 'success',
                    message: '新增成功',
                  });
                }
                this.newrent();
                this.getbaseinfo();
                this.getHuizong();
                this.getfwSelect();
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消',
              });
            });
          } else {
            let str = '';
            if (this.rentlist.usetype == '0402') {
              str = '自用';
            }
            if (this.rentlist.usetype == '0404') {
              str = '闲置';
            }
            this.$message({
              type: 'error',
              message: `勾选房屋中已有${str}用途，不可提交`,
            });
          }
        });
      }
    },
    submitrentinfo2() {
      console.log(this.choosedFw);
      console.log(this.rentlist);
      this.rentlist.rentarea1 = [];
      this.rentlist.rentarea2 = [];
      this.rentlist.detailid = [];
      for (let i = 0; i < this.choosedFw.length; i += 1) {
        this.rentlist.rentarea1.push(this.choosedFw[i].hash.rentarea1);
        this.rentlist.rentarea2.push(this.choosedFw[i].hash.rentarea2);
        this.rentlist.detailid.push(this.choosedFw[i].hash.detailid);
      }
      if (this.rentlist.usetype == '0401') {
        if (this.rentlist.detailid == 'undefined' || this.rentlist.detailid == '') {
          this.$message('房屋不能为空');
          return;
        }
        if (!this.rentlist.usenature || this.rentlist.usenature.length < 1) {
					  this.$message('使用性质不能为空');
					  return;
        }
        if (!this.rentlist.renter || this.rentlist.renter.length < 1) {
          this.$message('承租人不能为空');
          return;
        }
        if (this.rentdate == []) {
          this.$message('承租人不能为空');
          return;
        }
        if (!this.rentlist.rentfee || this.rentlist.rentfee.length < 1) {
          this.$message('租金不能为空');
          return;
        }
        if (!this.rentlist.deposit || this.rentlist.deposit.length < 1) {
          this.$message('押金不能为空');
          return;
        }
        if (!this.rentlist.contactor || this.rentlist.contactor.length < 1) {
          this.$message('联系人不能为空');
          return;
        }
        if (!this.rentlist.zdmj || this.rentlist.zdmj.length < 1) {
					  this.$message('占地面积不能为空');
					  return;
        }
        // if (!this.rentlist.usearea2 || this.rentlist.usearea2.length < 1) {
        //   this.$message('无证使用面积不能为空');
        //   return;
        // }
        this.$confirm('确认新增？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const res = {
            handle: '76ABA4BE996F68CEDFC8492E914AB35BAA5F79F5E9520365BFF0B9210751F692',
            token: localStorage.getItem('token'),
            rentid: this.checkid,
            hid: this.$route.query.hid,
            rentnum: this.rentnum,
            remark: this.rentlist.remark,
            detailid: this.rentlist.detailid,
            rentarea1: this.rentlist.rentarea1,
            rentarea2: this.rentlist.rentarea2,
            detailidlist: this.rentlist.detailid.toString(),
            usenature: this.rentlist.usenature,
            deposit: this.rentlist.deposit,
            usetype: this.rentlist.usetype,
            usearea1: this.usearea1,
            usearea2: this.usearea2,
            rentertype: this.rentlist.rentertype,
            renter: this.rentlist.renter,
            contact: this.rentlist.contact,
            renttime: this.rentlist.renttime,
            employee1: this.rentlist.employee1,
            employee2: this.rentlist.employee2,
            creditlev: this.rentlist.creditlev,
            naturer: this.rentlist.naturer,
            zdmj: this.rentlist.zdmj,
            rentstart: this.rentdate[0],
            rentend: this.rentdate[1],
            contractstart: this.rentdate1[0],
            contractend: this.rentdate1[1],
            acturerentfee: this.rentlist.acturerentfee,
            rentfee: this.rentlist.rentfee,
            guarant: this.rentlist.guarant,
            rentuse: this.rentlist.rentuse,
            regaddr: this.rentlist.regaddr,
            contactor: this.rentlist.contactor,
            renttype: this.rentlist.renttype,
            renttypedes: this.rentlist.renttypedes,
            rentdayfee: this.rentlist.rentdayfee,
            rentyear: this.rentlist.rentyear,
            actureuse: this.rentlist.actureuse,
            actureuseattach: this.rentlist.actureuseattach,
            rentagreement: this.rentlist.rentagreement,
            rentuseattach: this.rentlist.rentuseattach,
          };
          this.spost(this.ts, '/mainservlet', res).then((ts) => {
            this.$message({
              type: 'success',
              message: '保存成功!',
            });
            this.newrent();
            this.getbaseinfo();
            this.getHuizong();
            this.edityt = false;
          });
          // const res2 = {
          //   handle: '76ABA4BE996F68CEB3F2193D08E3133274D6646BBC368B8F0382D6715B544D49',
          //   token: localStorage.getItem('token'),
          //   rentid: this.checkid,
          // };
          // this.spost(this.ts, '/mainservlet', res2).then((ts2) => {

          // });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
      } else if (this.rentlist.usetype == '0403') {
        if (this.rentlist.detailid == 'undefined' || this.rentlist.detailid == '') {
          this.$message('房屋不能为空');
          return;
        }
        if (!this.rentlist.usenature || this.rentlist.usenature.length < 1) {
					  this.$message('使用性质不能为空');
					  return;
        }
        if (!this.rentlist.zdmj || this.rentlist.zdmj.length < 1) {
					  this.$message('占地面积不能为空');
					  return;
        }
        if (!this.rentlist.renter || this.rentlist.renter.length < 1) {
          this.$message('承租人不能为空');
          return;
        }
        if (!this.rentlist.deposit || this.rentlist.deposit.length < 1) {
          this.$message('押金不能为空');
          return;
        }
        if (!this.rentlist.contactor || this.rentlist.contactor.length < 1) {
          this.$message('联系人不能为空');
          return;
        }
        // if (!this.rentlist.usearea1 || this.rentlist.usearea1.length < 1) {
        //   this.$message('有证使用面积不能为空');
        //   return;
        // }
        // if (!this.rentlist.usearea2 || this.rentlist.usearea2.length < 1) {
        //   this.$message('无证使用面积不能为空');
        //   return;
        // }
        this.$confirm('确认新增？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const res = {
            handle: '76ABA4BE996F68CEDFC8492E914AB35BAA5F79F5E9520365BFF0B9210751F692',
            token: localStorage.getItem('token'),
            hid: this.$route.query.hid,
            rentid: this.checkid,
            rentnum: this.rentnum,
            detailid: this.rentlist.detailid,
            rentarea1: this.rentlist.rentarea1,
            rentarea2: this.rentlist.rentarea2,
            detailidlist: this.rentlist.detailid.toString(),
            usenature: this.rentlist.usenature,
            usetype: this.rentlist.usetype,
            deposit: this.rentlist.deposit,
            zdmj: this.rentlist.zdmj,
            usearea1: this.usearea1,
            remark: this.rentlist.remark,
            usearea2: this.usearea2,
            rentertype: this.rentlist.rentertype,
            renter: this.rentlist.renterid,
            contact: this.rentlist.contact,
            renttime: this.rentlist.renttime,
            rentstart: this.rentdate[0],
            rentend: this.rentdate[1],
            contractstart: this.rentdate1[0],
            contractend: this.rentdate1[1],
            rentfee: this.rentlist.rentfee,

            acturerentfee: this.rentlist.acturerentfee,
            creditlev: this.rentlist.creditlev,
            naturer: this.rentlist.naturer,
            guarant: this.rentlist.guarant,
            rentuse: this.rentlist.rentuse,
            regaddr: this.rentlist.regaddr,
            contactor: this.rentlist.contactor,
            renttype: this.rentlist.renttype,
            renttypedes: this.rentlist.renttypedes,
            rentdayfee: this.rentlist.rentdayfee,
            rentyear: this.rentlist.rentyear,
            actureuse: this.rentlist.actureuse,
            actureuseattach: this.rentlist.actureuseattach,
            rentagreement: this.rentlist.rentagreement,
            rentuseattach: this.rentlist.rentuseattach,
          };
          this.spost(this.ts, '/mainservlet', res).then((ts) => {
            this.$message({
              type: 'success',
              message: '保存成功!',
            });
            this.newrent();
            this.getbaseinfo();
            this.getHuizong();
            this.edityt = false;
          });
          // const res2 = {
          //   handle: '76ABA4BE996F68CEB3F2193D08E3133274D6646BBC368B8F0382D6715B544D49',
          //   token: localStorage.getItem('token'),
          //   rentid: this.checkid,
          // };
          // this.spost(this.ts, '/mainservlet', res2).then((ts2) => {

          // });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
      } else {
        if (this.rentlist.detailid == 'undefined' || this.rentlist.detailid == '') {
          this.$message('房屋不能为空');
          return;
        }
        if (!this.rentlist.usenature || this.rentlist.usenature.length < 1) {
					  this.$message('使用性质不能为空');
					  return;
        }
        if (!this.rentlist.zdmj || this.rentlist.zdmj.length < 1) {
					  this.$message('占地面积不能为空');
					  return;
        }
        if (!this.rentlist.contactor || this.rentlist.contactor.length < 1) {
          this.$message('联系人不能为空');
          return;
        }
        // if (!this.rentlist.usearea2 || this.rentlist.usearea2.length < 1) {
        //   this.$message('无证使用面积不能为空');
        //   return;
        // }
        this.$confirm('确认新增？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const res = {
            handle: '76ABA4BE996F68CEDFC8492E914AB35BAA5F79F5E9520365BFF0B9210751F692',
            token: localStorage.getItem('token'),
            hid: this.$route.query.hid,
            rentnum: this.rentnum,
            rentid: this.checkid,
            detailid: this.rentlist.detailid,
            rentarea1: this.rentlist.rentarea1,
            rentarea2: this.rentlist.rentarea2,
            remark: this.rentlist.remark,
            detailidlist: this.rentlist.detailid.toString(),
            usenature: this.rentlist.usenature,
            usetype: this.rentlist.usetype,
            creditlev: this.rentlist.creditlev,
            naturer: this.rentlist.naturer,
            zdmj: this.rentlist.zdmj,
            usearea1: this.usearea1,
            usearea2: this.usearea2,
            rentertype: this.rentlist.rentertype,
            renter: this.rentlist.renterid,
            contact: this.rentlist.contact,
            renttime: this.rentlist.renttime,
            rentstart: this.rentdate[0],
            rentend: this.rentdate[1],
            contractstart: this.rentdate1[0],
            contractend: this.rentdate1[1],
            rentfee: this.rentlist.rentfee,
            acturerentfee: this.rentlist.acturerentfee,
            guarant: this.rentlist.guarant,
            rentuse: this.rentlist.rentuse,
            regaddr: this.rentlist.regaddr,
            contactor: this.rentlist.contactor,
            renttype: this.rentlist.renttype,
            renttypedes: this.rentlist.renttypedes,
            rentdayfee: this.rentlist.rentdayfee,
            rentyear: this.rentlist.rentyear,
            actureuse: this.rentlist.actureuse,
            actureuseattach: this.rentlist.actureuseattach,
            rentagreement: this.rentlist.rentagreement,
            rentuseattach: this.rentlist.rentuseattach,
          };
          this.spost(this.ts, '/mainservlet', res).then((ts) => {
            if (ts.d.length > 100) {
              this.$message({
                type: 'success',
                message: '保存成功',
              });
            }
            this.newrent();
            this.getbaseinfo();
            this.getHuizong();
            this.edityt = false;
          });
          // const res2 = {
          //   handle: '76ABA4BE996F68CEB3F2193D08E3133274D6646BBC368B8F0382D6715B544D49',
          //   token: localStorage.getItem('token'),
          //   rentid: this.checkid,
          // };
          // this.spost(this.ts, '/mainservlet', res2).then((ts2) => {

          // });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
      }
    },
  },
  created() {
    this.checkgd2();
    this.getrenterList();
    this.getHuizong();
    this.getSelectList('14', 'shiyongArr');
    this.getSelectList('05', 'renttypeArr');
    this.getSelectList('07', 'rentertypeArr');
    this.getSelectList('08', 'feetypeArr');
    this.getSelectList('09', 'rentstatuArr');
    this.getSelectList('04', 'usetypeArr');
    // this.getfwSelect();
    this.getbaseinfo();
    if (this.handletype == '3') {
      this.isupload = '0';
    }
  },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
	.errorMes {
		width: 175px;
		color: red;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		display: inline-block;
	}

	.item {
		i {
			color: red;
		}
	}

	.xiugai {
		background: #ffff0070;
	}

	.xiugai2 {
		background: rgba(213, 176, 132, 0.49);
	}


	.avatar ul li {
		float: left;
		width: 33%;
	}

	.info-wrapper .info-content .upload-btn[data-v-6b40dfc5] {
		background: #fff;
		width: 90px;
	}

	.item-info>>>.el-date-editor .el-range-separator {
		padding: 0;
		line-height: 22px;
	}

	.item-info>>>.el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 300px;
		height: 40px;
	}

	.item-info>>>.el-input__inner {
		height: 40px;
		border-top: 2px solid #999;
		border-radius: 0;
	}

	.item-info>>>.el-input__icon {
		line-height: 22px;
		color: #333;
	}

	.avatar>>>.el-upload--picture-card {
		width: 90px;
		height: 90px;
		line-height: 100px;
		margin-top: 20px;
	}

	.avatar>>>.el-upload-list--picture-card .el-upload-list__item {
		width: 90px;
		height: 90px;
		margin-top: 20px;
	}

	.upload-btn>>>.el-upload-list__item {
		width: 160%;
	}

	.sub-btn>>>.el-button--success {
		background: #69f;
		border-color: #69f;
	}
    td{
        height:auto;
    }
	.sub-btn>>>.el-button {
		padding: 8px 20px;
	}

	.info-wrapper {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;

		.info-w {
			height: 50px;
			line-height: 50px;
			width: 100%;
			background: #69f;
			color: #fff;
			cursor: pointer;

			.info-c {
				width: 1200px;
				margin: 0 auto;

				.close {
					display: inline-block;
					margin-right: 20px;

					.iconfont {
						font-size: 20px;
					}
				}

				.title {
					display: inline-block;
					font-size: 18px;
				}
			}
		}

		.info-content {
			width: 1200px;
			min-height: 600px;
			margin: 0 auto 50px;

			.upload-btn {
				display: inline-block;
				vertical-align: top;
				margin-left: 5px;
				width: 80px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				border-radius: 5px;
				color: #fff;
			}

			.info-tab {
				cursor: pointer;
				border-bottom: 1px solid #ccc;

				.tab-item {
					display: inline-block;
					width: 120px;
					height: 40px;
					line-height: 40px;
					text-align: center;
					border: 1px solid #ccc;
					margin: 15px 0 15px -1px;
					background: #fff;

					&.active {
						background: #69f;
						color: #fff;
					}
				}
			}

			.item-info {
				position: relative;

				.sub-btn {
					position: absolute;
					right: 190px;
					top: -60px;
					height: 40px;
					line-height: 40px;

					.save-btn,
					.add-btn {
						display: inline-block;
						margin-right: 15px;
					}
				}

				.info-list {
					margin-top: 50px;
					border-top: 1px solid #ccc;
					text-align: center;

					.title {
						padding: 30px 0;
						font-weight: 600;
						font-size: 18px;
						color: #6699ff;
					}

					table {
                        table-layout:fixed;
                        word-break:break-all;
						text-align: center;
						padding-left: 30px;
						cursor: pointer;
						border-collapse: collapse;

						td,
						th {
							border: 1px solid #ccc;
							font-size: 14px;
							color: #666;
							height: 40px;
						}

						thead {
							th {
								font-weight: 600;
								background-color: #F2F2F2;

								&:nth-of-type(2) {
									width: 120px;
								}
							}
						}
					}
				}

				.left-info,
				.right-info {
					display: inline-block;
					vertical-align: top;
					width: 600px;

					.item {
						margin-top: 5px;
						height: 30px;
						line-height: 30px;

						&:nth-of-type(1) {
							margin-top: 15px;
						}

						&.icon {
							position: relative;

							.iconfont {
								position: absolute;
								top: 0;
								right: 190px;
							}
						}

						span {
							display: inline-block;
							vertical-align: top;
							width: 120px;
							color: #333333;
							font-weight: 600;
						}

						input {
							display: inline-block;
							vertical-align: top;
							width: 300px;
							height: 30px;
							border: 1px solid #ccc;
							border-top: 2px solid #999;
						}

						select {
							display: inline-block;
							width: 300px;
							height: 30px;
							border: 1px solid #ccc;
							border-top: 2px solid #999;
							text-align: left;

							&.min1 {
								width: 100px;
							}

							&.min2 {
								width: 200px;
								margin-left: -1px;
							}
						}

						&.textarea {
							height: 150px;

							textarea {
								width: 300px;
								height: 150px;
								border: 1px solid #ccc;
								border-top: 2px solid #999;
							}
						}

						&.spec {
							height: 70px;

							span {
								float: left;
							}

							.text {
								display: inline-block;

								input:nth-of-type(1) {
									width: 100px;
								}

								input:nth-of-type(2) {
									width: 200px;
								}

								&:nth-of-type(2) {
									margin-top: 5px;
								}
							}
						}

						&.spec2 {
							height: 30px;

							.text {
								display: inline-block;

								input {
									display: inline-block;
									vertical-align: top;
								}

								input:nth-of-type(1) {
									width: 200px;
								}

								input:nth-of-type(2) {
									width: 100px;
								}

								select {
									display: inline-block;
									vertical-align: top;
									width: 100px;
								}
							}
						}

						&.spec3 {
							height: 70px;

							span {
								height: 70px;
								float: left;
							}

							.text {
								display: inline-block;
								margin-top: 5px;

								input:nth-of-type(1) {
									width: 200px;
								}

								input:nth-of-type(2) {
									width: 100px;
								}
							}
						}

						&.spec4 {
							height: 70px;

							span {
								float: left;
								height: 70px;
							}

							input {
								margin-top: 5px;
							}
						}

						&.spec5 {
							.line {
								display: inline-block;
								vertical-align: middle;
								width: 20px;
								height: 1px;
								background: #ccc;
							}

							.iconfont {
								&:ntn-of-type(1) {
									right: 190px;
								}

								&:nth-of-type(2) {
									right: 350px;
								}
							}
						}
					}

					.item2 {
						margin-top: 5px;
						line-height: 30px;

						&:nth-of-type(1) {
							margin-top: 15px;
						}

						&.icon {
							position: relative;

							.iconfont {
								position: absolute;
								top: 0;
								right: 190px;
							}
						}

						span {
							display: inline-block;
							vertical-align: top;
							width: 120px;
							color: #333333;
							font-weight: 600;
						}

						input {
							display: inline-block;
							vertical-align: top;
							width: 300px;
							height: 30px;
							border: 1px solid #ccc;
							border-top: 2px solid #999;
						}

						select {
							display: inline-block;
							width: 300px;
							height: 30px;
							border: 1px solid #ccc;
							border-top: 2px solid #999;
							text-align: right;

							&.min1 {
								width: 100px;
							}

							&.min2 {
								width: 200px;
								margin-left: -1px;
							}
						}

						&.textarea {
							height: 150px;

							textarea {
								width: 300px;
								height: 150px;
								border: 1px solid #ccc;
								border-top: 2px solid #999;
							}
						}

						&.spec {
							height: 70px;

							span {
								float: left;
							}

							.text {
								display: inline-block;

								input:nth-of-type(1) {
									width: 100px;
								}

								input:nth-of-type(2) {
									width: 200px;
								}

								&:nth-of-type(2) {
									margin-top: 5px;
								}
							}
						}

						&.spec2 {
							height: 30px;

							.text {
								display: inline-block;

								input {
									display: inline-block;
									vertical-align: top;
								}

								input:nth-of-type(1) {
									width: 200px;
								}

								input:nth-of-type(2) {
									width: 100px;
								}

								select {
									display: inline-block;
									vertical-align: top;
									width: 100px;
								}
							}
						}

						&.spec3 {
							height: 70px;

							span {
								height: 70px;
								float: left;
							}

							.text {
								display: inline-block;
								margin-top: 5px;

								input:nth-of-type(1) {
									width: 200px;
								}

								input:nth-of-type(2) {
									width: 100px;
								}
							}
						}

						&.spec4 {
							height: 70px;

							span {
								float: left;
								height: 70px;
							}

							input {
								margin-top: 5px;
							}
						}

						&.spec5 {
							.line {
								display: inline-block;
								vertical-align: middle;
								width: 20px;
								height: 1px;
								background: #ccc;
							}

							.iconfont {
								&:ntn-of-type(1) {
									right: 190px;
								}

								&:nth-of-type(2) {
									right: 350px;
								}
							}
						}
					}

					.upload {
						width: 400px;
						margin-top: 15px;
						text-align: center;

						.avatar {
							width: 400px;
							height: 200px;
							border: 1px solid #ccc;
							margin-bottom: 15px;
						}

						.desc {
							margin-bottom: 15px;
						}

						.btn {
							display: inline-block;
							margin-bottom: 15px;
							width: 80px;
							height: 30px;
							line-height: 30px;
							text-align: center;
							border-radius: 5px;
							background: #69f;
							color: #fff;
						}
					}
				}

				&.base-info {
					.right-info {
						.item {
							margin-top: 6px;
						}
					}
				}

				&.rent-info {
					.right-info {
						.item {
							margin-top: 10px;

							&:nth-of-type(1) {
								margin-top: 15px;
							}
						}
					}
				}

				span {
					display: inline-block;
					vertical-align: top;
				}
			}
		}
	}
</style>
